<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#344058" text-color="#fff" active-text-color="#409EFF">
  <h1 class="h1"> {{isCollapse ? "打卡" : "疫情打卡"}}</h1>
  <el-menu-item  @click="clickMenu(item)" v-for="item in menu" :key="item.name" :index="item.name">
    <i :class="'el-icon-'+item.icon"></i>
    <span slot="title">{{item.label}}</span>
  </el-menu-item>
</el-menu>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    methods: {
      clickMenu(item) {
        this.$router.push({
          name: item.name
        })
        this.$store.commit("ADDTABLIST", item)
      }
    },
    computed: {
      ...mapState({
        isCollapse: (state)=>state.home.isCollapse,
        userInfo: (state) => state.user.userInfo,
        resultAllRouters: (state) => state.user.resultAllRouters,
        menu: (state) => state.user.lastMenu
      })
    }
  }
</script>

<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    height: 100%;
  }
  .h1 {
    text-align: center;
    color: white;
  }
</style>
